<template>
  <div>
<!--    <el-button class="add" size="mini" icon="el-icon-plus" type="primary" @click="add()">新增问题类型</el-button>-->
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist"
              size="mini" stripe border
              fit
              highlight-current-row>
      <el-table-column
        prop="id"
        label="ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="问题类型"
        width="150">
      </el-table-column>
      <el-table-column
        label="图片链接"
        width="80">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="width: 50px">
        </template>
      </el-table-column>
      <el-table-column
        prop="button"
        label="提交问题按钮名称"
        >
      </el-table-column>
      <el-table-column
        width="180"
        prop="created_at"
        label="创建时间">
      </el-table-column>
      <el-table-column
        width="180"
        prop="updated_at"
        label="更新时间">
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <div>
<!--            <el-button type="success" size="mini" @click="deleteRow(scope.row)">删除</el-button>-->
            <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id"
                ></save-update>
  </div>
</template>

<script>
  import { getProblemsList } from "@/api/index"
  import saveUpdate from './saveUpdate.vue'
  export default {
    name: "index",
    components:{saveUpdate},
    data() {
      return {
        show_id: null,
        showUpdate: false,
        listData: {},
        listLoading: false,
        q: {page_size: 30, page_no: 1},
      }
    },
    created(){

      this.getList()
    },
    methods: {
      add() {
        this.show_id = null
        this.showUpdate = true
      },
      deleteRow(row) {
        this.$message({type: 'success', message: `删除成功：${row.id}`})
      },
      update(row) {
        this.show_id = row.id
        this.showUpdate = true
      },
      sortlist(sort) {
        // this.q.$orderby = sort.prop
        // this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
      getList() {


        getProblemsList(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>

<style scoped>
  .add {
    float: right;
  }

  .el-calendar-table {
    margin: 10px 0 0 0;
  }
</style>
